<template>
    <div class="bookshelf">
        <!-- 搜索 筛选框 -->
        <div class="search">
            <el-input v-model="keyword" placeholder="请输入商品名称/类型" size="large" @change="searchHandler">
                <template #prepend>
                    <el-cascader v-model="category" :options="options.list" @change="changeCategory"/>
                </template>
                <template #append>
                    <el-button :icon="Search" @click="searchHandler" />
                </template>
            </el-input>
            <!-- 条数 -->
            <div v-if="goods.total" class="total">
                搜索到 {{ goods.total }} 个结果
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="list" v-if="goods.total">
            <GoodsItem v-for="item in goods.list" :key="item.id" :goods="item"></GoodsItem>
        </div>
        <div v-else>
            <div class="empty">
                <img src="../../assets/empty.png" />
                <div>
                    无结果
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination hide-on-single-page="true" small background layout="prev, pager, next" :current-page="goods.page"
                :page-size="goods.pageSize" :total="goods.total" @current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { reclassify, search, bookList, getBookByCategory } from '@/api/book';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue'
import GoodsItem from '@/components/GoodsItem.vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const keyword = ref('')
const category = ref(0)
//分类列表
const options = reactive({
    list: []
})
//获取二级分类列表
const getReclassify = () => {
    reclassify({}).then(res => {
        if (res.data.code === 200) {
            options.list = res.data.reclassifyList
            options.list.unshift({
                value: 0,
                label: '全部'
            })
        } else {
            ElMessage.error(res.data.message)
        }
    })
}
//获取二级分类
getReclassify()

//搜索结果列表
const goods = reactive({
    list: [],
    page: 1,
    total: 0,
    limit: 10
})

//搜索
const searchHandler = () => {

    if (keyword.value === '' && category.value === 0) {
        getAll()
    }else if (keyword.value === '' && category.value !== 0) {
        let params = {
            category_id: category.value,
            start: (goods.page - 1) * goods.limit,
            limit: goods.limit
        }
        console.log(params);
        getBookByCategory({...params}).then(res => {
            if (res.data.code === 200) {
                goods.list = res.data.goods
                goods.total = res.data.total
            } else {
                ElMessage.error(res.data.message)
            }
        })
    } else {
        let params = {
            category_id: category.value,
            keyword: keyword.value,
            start: (goods.page - 1) * goods.limit,
            limit: goods.limit
        }
        search({...params}).then(res => {
            if (res.data.code === 200) {
                goods.list = res.data.goods
                goods.total = res.data.total
            } else {
                ElMessage.error(res.data.message)
            }
        })
    }
}

//获取所有商品
const getAll = async () => {
    bookList({
        start: (goods.page - 1) * goods.limit,
        limit: goods.limit
    }).then(res => {
        if (res.data.code === 200) {
            goods.list = res.data.goods
            goods.total = res.data.total
        } else {
            ElMessage.error(res.data.message)
        }
    })
}

//分页
const handleCurrentChange = (val) => {
    goods.page = val
    searchHandler()
}

//监听修改分类
const changeCategory = (value) => {
    category.value = value[value.length - 1];
}


if(route.query.keyword){
    keyword.value = route.query.keyword
    //通过关键词搜索
    searchHandler()
}else{
    //获取所有
    getAll()
}

watch(() => route.query.keyword, (val) => {
    keyword.value = route.query.keyword
    //通过关键词搜索
    searchHandler()
})


</script>

<style scoped lang='less'>
.bookshelf {
    margin: 30px 0;

    .search {
        padding: 20px 0;

        .total {
            margin-top: 10px;
            padding-left: 5px;
            color: #666;
        }
    }

    .empty{
        margin: 20px 0;
        text-align: center;
        color:#777;

        img{
            width: 40%;
        }
    }

    .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
}

:deep(.el-cascader) {
    height: 100%;
}

:deep(.el-input--suffix) {
    height: 100%;
}

:deep(.el-input-group__prepend) {
    padding: 0;
}

:deep(.el-input-group__append) {
    padding: 0 30px;
}
</style>